<template>
  <el-form :model="ruleForm" ref="ruleForm" label-position="left">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">违章预警配置</span>
      </div>
      <el-row>
        <el-col :span="24" class="col-wrap">
          <el-switch v-model="ruleForm.carViolationMessageConfig.openFlag" active-value="1" inactive-value="0"/>
          <el-form-item label-width="180px" label="违章短信通知推送规则:" prop="carViolationMessageConfig.pushRule" class="text-day"
                        :rules="{required: true, message:'请选择违章短信通知推送规则',trigger: 'change'}">
            <el-select filterable v-model="ruleForm.carViolationMessageConfig.pushRule" clearable
                       style="width: 100%">
              <el-option v-for="item in dict.type.violation_type" :label="item.label" :value="item.value" :key="item.value"/>
            </el-select>

          </el-form-item>
        </el-col>
        <el-col :span="24" class="col-wrap">
          <el-form-item label-width="180px" label="自定义配置" class="text-day">
          </el-form-item>
        </el-col>
        <el-col :span="24" class="col-wrap" style="margin-left: 30px"
                v-for="(item, index) in ruleForm.carViolationMessageConfigList"
                :key="index">
          <el-switch v-model="item.openFlag" active-value="1" inactive-value="0"/>
          <el-form-item label-width="90px" label="公司名称:" :prop="`carViolationMessageConfigList.${index}.companyId`"
                        class="text-day"
                        :rules="{required: true,message: '请选择公司名称',trigger: 'change',}">
            <el-select filterable v-model="item.companyId" clearable
                       @change="()=>handleChange(item)"
                       style="width: 350px">
              <template v-for="(item, index) in companyDataList">
                <el-option :label="item.deptName" :value="item.deptId" :key="index"></el-option>
              </template>
            </el-select>

          </el-form-item>

          <el-form-item label-width="200px" label="违章短信通知推送规则:"
                        :prop="`carViolationMessageConfigList.${index}.pushRule`"
                        class="text-day"
                        :rules="{required: true,message: '请选择违章短信通知推送规则', trigger: 'change',}">
            <el-select filterable v-model="item.pushRule" clearable
                       style="width: 100%">
              <el-option v-for="item in dict.type.violation_type" :label="item.label" :value="item.value" :key="item.value"/>
            </el-select>
          </el-form-item>

          <i class="el-icon-circle-plus-outline icon_add" v-if="index===ruleForm.carViolationMessageConfigList.length-1"
             @click="add(index, 0)"></i>
          <i v-else class="el-icon-remove-outline icon_add"
             @click="sub(index, 0)"></i>
        </el-col>

      </el-row>
    </el-card>


  </el-form>
</template>

<script>
import {v1 as uuid_v1} from "uuid";
import {listDept} from "@/api/system/dept";

export default {
  name: "regulations",
  dicts:['violation_type'],
  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key)
          },
          set(target, key, value) {
            that.$emit('input', {...target, [key]: value})
            return true
          }
        })
        return proxy
      }
    },

  },

  data() {
    return {
      companyDataList: []
    };
  },
  created() {
    this.getBelongCompany()
  },

  methods: {

    getBelongCompany() {
      listDept(
          {
            deptType: '2',//组织类型（1部门 2公司）
            // regionId: this.form.cityId,//所在城市（省市区id）
          }).then(res => {
        this.companyDataList = res.data
      })
    },
    add(index, type) {
      let val = {
        companyId: "",
        companyName: "",
        configId: "",
        openFlag:"0",
        pushConfig:"2",
        pushRule:""
      }
      this.ruleForm.carViolationMessageConfigList.splice(index + 1, 0, val)
      this.$forceUpdate()
    },
    sub(index, type) {
      this.ruleForm.carViolationMessageConfigList.splice(index, 1)

      this.$forceUpdate()

    },

    handleEffect() {
      return new Promise((resolve, reject) => {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    handleChange(val) {
      let obj =  this.companyDataList.find(a=>a.deptId === val.companyId)
      val.companyName = obj?.deptName
    },


  },
};
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 15px;
}

.col-wrap {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: flex-start;
}

.text-day {
  margin-left: 10px;
  font-size: 14px;
}

.el-form-item--small.el-form-item {
  margin-bottom: 0 !important;
}

.icon_add {
  cursor: pointer;
  margin-left: 10px;
}

.box-card {
  margin-bottom: 0 !important;
}
</style>
